﻿@model Senparc.Weixin.MP.Entities.GetMenuResult
@{
    ViewBag.Title = "自定义菜单工具";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section HeaderContent
{
    <style>
        .txtButton {
            width: 120px;
        }

        select.dllButtonDetails {
            padding: 5px;
        }

            select.dllButtonDetails option {
                padding: 5px;
            }

        .txtButtonDetails {
            width: 200px;
        }

        .txtToken {
            width: 80%;
        }

        .submitArea {
            clear: both;
        }

        .leftArea {
            width: 450px;
        }

        #addConditionalArea {
            padding: 0px 0px 30px 20px;
        }

            #addConditionalArea input {
                width: 500px;
            }

            #addConditionalArea h3 {
                font-size: 60%;
            }

        #reveiveJSON {
            margin: 30px 40px;
        }

            #reveiveJSON textarea {
                width: 90%;
                height: 150px;
            }
    </style>
}
<div class="wrapper">
    <div id="menuLogin">
        <div class="form-control">
            <ul>
                <li>
                    <div class="control-head">
                        <label class="control-title">获取AccessToken</label>
                    </div>
                </li>
                <li>
                    <label class="control-label">AppId:</label>
                    <input class="control-input" id="menuLogin_AppId" type="text" />
                </li>
                <li>
                    <label class="control-label">AppSecret:</label>
                    <input class="control-input" id="menuLogin_AppSecret" type="text" />
                </li>
                <li>
                    <button class="control-btn" id="menuLogin_Submit">获取AccessToken</button>
                </li>
                <li>
                    <p class="control-p">注：</p>
                    <p class="control-p">1.使用菜单需要成为“服务号”，或通过认证的“订阅号”。到微信后台【高级功能>开发模式】下获取信息</p>
                    <p class="control-p">2.这里的Token已经使用AccessTokenContainer管理起来，有效期内不会重复获取，过了有效期自动获取。也就是说如果已经在本网页上获取一次，接下去只需要提供AppId即可（直到服务器重启或列队过长被清理）</p>
                </li>
            </ul>
            <p style="padding: 15px 20px; font-size: 16px;">或：</p>
            <ul>
                <li>
                    <div class="control-head">
                        <label class="control-title">我有当前可用Token</label>
                    </div>
                </li>
                <li>
                    <label class="control-label">Token:</label>
                    <input class="control-input" id="menuLogin_OldToken" type="text" />
                </li>
                <li>
                    <button class="control-btn" id="menuLogin_SubmitOldToken">直接使用</button>
                </li>
                <li>
                    <p class="control-p">注：这个Token是通过AppId和AppSecret得到的自动生成的Token。</p>
                </li>
            </ul>
        </div>
        <div class="form-control">
            <div class="up-experience">
                <p>微微嗨已全面支持二级菜单、点击事件和访问网页</p>
                <p>让微微嗨为您的微信账号做一次全面升级，获得更多菜单功能！</p>
                <img src="/images/v2/menu-up.png" />
                <p><a href="http://www.weiweihi.com" target="_blank">点击这开始体验</a></p>
            </div>
        </div>
    </div>
    <div id="menuEditor">
        <h3>使用说明及规则，请仔细阅读</h3>
        <ul>
            <li>官方要求：一级菜单按钮个数为2-3个</li>
            <li>官方要求：如果设置了二级菜单，子按钮个数为2-5个</li>
            <li>官方要求：按钮描述，既按钮名字，不超过16个字节，子菜单不超过40个字节</li>
            <li>如果name不填，此按钮将被忽略</li>
            <li>如果一级菜单为空，该列所有设置的二级菜单都会被忽略</li>
            <li>key仅在SingleButton（单击按钮，无下级菜单）的状态下设置，如果此按钮有下级菜单，key将被忽略</li>
            <li>所有二级菜单都为SingleButton</li>
            <li>如果要快速看到微信上的菜单最新状态，需要重新关注，否则需要静静等待N小时</li>
        </ul>
        <p></p>
        <h3>编辑工具</h3>
        @using (Html.BeginForm("CreateMenu", "Menu", FormMethod.Post, new { id = "form_Menu" }))
        {
            <p>
                当前Token:
                <input id="tokenStr" name="token" class="control-input" style="width: 900px;" type="text" readonly="readonly" /><br />
            </p>
            <p>
                <input id="btnGetMenu" class="control-btn" type="button" value="获取当前菜单" />
                <input id="btnDeleteMenu" class="control-btn" type="button" value="删除菜单" />
            </p>
            <p class="menu-state">
                操作状态：<strong id="menuState">-</strong>
            </p>
            <div class="float-left menu-list">
                <table>
                    <thead>
                        <tr>
                            <th></th>
                            <th>第一列</th>
                            <th>第二列</th>
                            <th>第三列</th>
                        </tr>
                    </thead>
                    <tbody>
                        @for (int i = 0; i < 6; i++)
                        {
                            var isRootMenu = i == 5;
                            <tr id="@(isRootMenu ? "subMenuRow_" + i : "rootMenuRow")">
                                <td>
                                    @(isRootMenu ? "一级菜单按钮" : ("二级菜单No." + (i + 1)))
                                </td>
                                @for (int j = 0; j < 3; j++)
                                {
                                    var namePrefix = isRootMenu ? string.Format("menu.button[{0}]", j) : string.Format("menu.button[{0}].sub_button[{1}]", j, i);
                                    var idPrefix = isRootMenu ? string.Format("menu_button{0}", j) : string.Format("menu_button{0}_sub_button{1}", j, i);
                                    <td>
                                        <input type="hidden" class="control-input" name="@(namePrefix).key" id="@(idPrefix)_key" />
                                        <input type="hidden" class="control-input" name="@(namePrefix).type" id="@(idPrefix)_type" value="click" />
                                        <input type="hidden" class="control-input" name="@(namePrefix).url" id="@(idPrefix)_url" />
                                        <input type="text" class="control-input" name="@(namePrefix).name" id="@(idPrefix)_name" class="txtButton" data-i="@i" data-j="@j" @Html.Raw(isRootMenu ? string.Format(@"data-root=""{0}""", j) : "") />
                                    </td>
                                }
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
            <div class="float-left" id="buttonDetails">
                <h3>按钮其他参数</h3>
                <p>Name：<input type="text" id="buttonDetails_name" class="control-input txtButton" disabled="disabled" /></p>
                <p>
                    Type：
                    <select id="buttonDetails_type" class="dllButtonDetails">
                        <option value="click" selected="selected">点击事件（传回服务器）</option>
                        <option value="view">访问网页（直接跳转）</option>
                        <option value="location_select">弹出地理位置选择器</option>
                        <option value="pic_photo_or_album">弹出拍照或者相册发图</option>
                        <option value="pic_sysphoto">弹出系统拍照发图</option>
                        <option value="pic_weixin">弹出微信相册发图器</option>
                        <option value="scancode_push">扫码推事件</option>
                        <option value="scancode_waitmsg">扫码推事件且弹出“消息接收中”提示框</option>
                    </select>
                </p>
                <p id="buttonDetails_key_area">
                    Key：<input id="buttonDetails_key" class="control-input txtButtonDetails" type="text" />
                </p>
                <p id="buttonDetails_url_area">
                    Url：<input id="buttonDetails_url" class="control-input txtButtonDetails" type="text" />
                </p>
                <p>
                    如果还有下级菜单请忽略Type和Key、Url。<br />
                </p>
            </div>
            <div class="clear"></div>
            <div id="addConditionalArea">
                <p><h3>个性化菜单设置</h3></p>
                <p>
                    <table>
                        <tr>
                            <td>group_id</td>
                            <td>
                                <input type="text" name="MenuMatchRule.group_id" placeholder="用户分组id，可通过用户分组管理接口获取
" class="control-input" />
                            </td>
                        </tr>
                        <tr><td>sex</td><td><input type="text" name="MenuMatchRule.sex" placeholder="性别：男（1）女（2），不填则不做匹配" class="control-input" /></td></tr>
                        <tr><td>country</td><td><input type="text" name="MenuMatchRule.country" placeholder="国家信息，是用户在微信中设置的地区，具体请参考地区信息表" class="control-input" /></td></tr>
                        <tr><td>province</td><td><input type="text" name="MenuMatchRule.province" placeholder="省份信息，是用户在微信中设置的地区，具体请参考地区信息表" class="control-input" /></td></tr>
                        <tr><td>city</td><td><input type="text" name="MenuMatchRule.city" placeholder="城市信息，是用户在微信中设置的地区，具体请参考地区信息表" class="control-input" /></td></tr>
                        <tr><td>client_platform_type</td><td><input type="text" name="MenuMatchRule.client_platform_type" placeholder="客户端版本，当前只具体到系统型号：IOS(1), Android(2),Others(3)，不填则不做匹配" class="control-input" /></td></tr>
                    </table>
                </p>
                <p><i>提示：如果所有字段都留空，则使用普通自定义菜单，如果任何一个条件有值，则使用个性化菜单接口</i></p>
            </div>

            <div class="clear"></div>
            <div id="submitArea">
                <input type="button" class="control-btn" value="更新到服务器" id="submitMenu" />
            </div>
        }

        <div id="reveiveJSON">
            <p>接收菜单JSON：</p>
            <p><textarea id="txtReveiceJSON"></textarea></p>

        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="clear"></div>

<script src="@Url.Content("~/Scripts/senparc.menu.js")"></script>
<script>
    $(function () {
        senparc.menu.init();
    });
</script>
